.page-container {
  display: flex;
  background: #fbfcf7;
  align-items: center;
  flex-direction: column;

  .play-ground .point,
  .show-css-code .code-item{
    &:nth-of-type(1) {
      color: tomato;
    }

    &:nth-of-type(2) {
      color: mediumseagreen;
    }

    &:nth-of-type(3) {
      color: orange;
    }

    &:nth-of-type(4) {
      color: dodgerblue;
    }
  }

  .play-ground {
    width: 300px;
    height: 300px;

    position: relative;
    box-shadow: inset 0 0 0 10px #fbfcf7;

    .clip-board,
    .shadow-board {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
    }

    .shadow-board {
      border: 1px solid #ccc;
    }

    .clip-board {
      background-size: cover;
      background-position: center center;
      background-image: url(./sparkler.jpg);
    }

    /* 拖拽点容器 */
    .points {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      .point {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 10px;
        opacity: 0.8;
        transition: opacity 0.25s;
        cursor: grab;

        &.is-dragging {
          z-index: 100;
          cursor: none;
          box-shadow: inset 0 0 0 3px;
          transition: box-shadow 0;
        }
      }
    }
  }

  .show-css-code {
    position: relative;
    margin-top: 60px;
    background: #100a09;
    color: #9a8297;
    padding: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 10, 9, 0.15);

    .code-area {
      pointer-events: none;
      cursor: default;
      user-select:none;

      .code-item {
        display: inline-block;
        position: relative;
        vertical-align: baseline;

        &:nth-last-of-type(1) {
          animation-delay: 0.125s;
        }
    
        &:nth-last-of-type(2) {
          animation-delay: 0.25s;
        }
    
        &:nth-last-of-type(3){
          animation-delay: 0.375s;
        }
    
        &:nth-last-of-type(4){
          animation-delay: 0.5s;
        }

        &::after {
          display: block;
          position: absolute;
          content: "";
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: currentColor;
          top: calc(50% - 40px);
          left: calc(50% - 40px);
          transform: scale(0);
          will-change: transform, opacity;
          opacity: 0;
        }

        &.changing {
          font-weight: bold;

          &::after {
            animation: water-wave 1.25s;
            animation-delay: inherit;
          }
        }
      }
    }

    .toast{
      position: absolute;
      top:-40px;
      left:50%;
      transform:translate(-50%);
    
      z-index: 9999;
      background: #0a0a0a;
      color: white;
      padding: 8px;
      border-radius: 10px;
      box-shadow: 0 0 2px rgba(16, 10, 9, 0.15);
      transition:.3s;
      cursor: default;
      user-select: none;
      opacity: 0;
      font-size: 12px;
    
      &.show{
        opacity: 1;
      }
    }
  }
}
@keyframes water-wave {
  20% {
    transform: none;
    opacity: 0.5;
  }

  to {
    opacity: 0;
    transform: scale(1.2);
  }
}


